<template>
    <div class="wrapper">
        <div class="wrapper-showDesign">
            <div class="showDesign">
                <v-stage :config="stage">
                    <v-layer>
                        <v-image :config="image"></v-image>
                    </v-layer>
                </v-stage>
                <div class="imageGrey">
                    <img src="https://qn.diyeetech.com/drapery.png" alt="">
                </div>
            </div>
        </div>

        <div class="btns">

        </div>
        <div class="nextbtnWrapper">
            <div class="nextBtn" @click="next_move">下一步</div>
        </div>

    </div>
</template>
<script>
    import withStore from "../../vuex/withStore";
    import {px2rem} from "../../utils/dom";

    export default withStore({
        data() {
            var image = this.getStore("design.designItem").image
            return {
                stage: {
                    width: 300,
                    height: 300,
                },
                image: {
                    fillPatternImage: "",
                    x: 0,
                    y: 0,
                    fillPatternScaleX: 300 / 1000,
                    fillPatternScaleY: 300 / 1000,
                    width: 300,
                    height: 300,
                    stroke: '#222',
                }
            }
        },
        created() {
            var self=this
            const image = new window.Image();
            image.src = this.getStore("design.designItem", true).image.url
            image.onload = () => {
                // set image only when it is loaded
                self.image.fillPatternImage = image;
            };
        },
        mounted() {
            /* if (this.getStore('design.designItem').status == 1) {
                 this.$router.push({path: '/design/add'})
             }*/
        },
        methods:{
            next_move(){
                this.$router.replace({path:"/design/publish"})
            }

        }
    })
</script>
<style lang="less" scoped>
    .wrapper {
        .btns {
            margin-top: 20px;
            background: red;
        }
        .nextbtnWrapper {
            display: flex;
            align-items: center;
            margin-top: 20px;
            justify-content: center;
            .nextBtn {
                width: 100px;
                height: 35px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 20px;
                background: orangered;
                color: #fff;
            }
        }
        .wrapper-showDesign {
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            .showDesign {
                position: relative;
                width: 300px;
                height: 300px;
                border: 1px solid #eee;
                box-shadow: 0 1px 1px #eee;
                .imageGrey {
                    position: absolute;
                    top: 0;
                    width: 300px;
                    height: 300px;
                    img {
                        width: 300px;
                        height: 300px;
                    }
                }
            }
        }

    }
</style>